<template>
	<view class="header">
	  <input type="text" v-model="inputVal" confirm-type="search" @confirm="confirmHandler">
	  <icon class="search-icon"
	        type="search"
	        size="16">
	  </icon>
	  <icon v-show="inputVal" class="clear-icon"
	        type="clear"
	        size="16"
	        color="#ccc" @click="clearInputVal">
	  </icon>
	</view>
</template>

<script>
	export default {
		props:['keyword'],
		data() {
			return {
			// 避免子直接改prop,所以需要设置给data属性
				inputVal:this.keyword
			};
		},
		methods:{
			confirmHandler(){
				// 当输入框的内容不为空时,给父组件传递一个search事件, 并传参
				if(this.inputVal){
					this.$emit('search',this.inputVal)
				}
			},
			// 清空输入框的内容
			clearInputVal(){
				this.inputVal = ''
			}
		},
		watch:{
			keyword(newValue){
				// 当父传子的传参有变化时,就会把变化值传过来
				// console.log(newValue)
				this.inputVal = newValue
			}
			// keyword:{
			// 	handler(newValue){
			// 		console.log(newValue)
			// 	},
			// 	immediate:true
			// }
		}
	}
</script>

<style lang="less" scoped>
.header {
  height: 120rpx;
  background-color: #eee;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  input {
    background-color: #fff;
    height: 60rpx;
    width: 720rpx;
    padding-left: 74rpx;
    box-sizing: border-box;
  }
  .search-icon {
    position: absolute;
    left: 44rpx;
  }

  .clear-icon {
    position: absolute;
    right: 44rpx;
    z-index: 100;
		left:auto;
  }
}
</style>